<template>
    <div>
        <h1 style="text-align: center;">角色编辑</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="权限分配">
                <el-tree
                    :props="props"
                    :data="authlist"
                    show-checkbox
                    ref="auth"
                    node-key="_id"
                    :default-checked-keys="auths"
                >
                <!-- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
                <!-- :default-checked-keys 默认勾选的节点的 key 的数组 -->
                </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onclick">立即编辑</el-button>
                <el-button @click="$router.back()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { authList, roleEdit, roleGetOne } from '@/request'
export default {
    data () {
        return {
            authlist:[],
            form:{
                name:''
            },
            props: {
                label: 'name',
                children: 'children'
            },
            id:'',
            auths:[]
        }
    },
    methods: {
        async GetAuthList() {
            let data = await authList()
            this.authlist = data.data.authlist
            console.log(this.authlist);
        },
        async onclick(){
            // console.log(11,this.form);
            // console.log(22,this.$refs.auth.getCheckedNodes());
            // 获取所有被选中的id
            let auths = this.$refs.auth.getCheckedNodes()
            // 整理一下 把所有id放在一起
            auths = auths.map(s => s._id)
            // 把所有父权限的id组成一个数组
            let patentIdArr = this.authlist.map(item  => item._id)
            // console.log(patentIdArr);
            // 遍历已选中的权限的id
            auths.forEach(auth => {
                // 判断选没选中父id
                let index = patentIdArr.indexOf(auth._id)
                // 没选中的话 
                if(index < 0){
                    // 选中了子权限要给父权限也选上
                    let patentId = ''
                    this.authlist.forEach(a => {
                        // 查一下子权限有没有选上     选上了
                        if(a.children.find(son => son._id === auth)){
                            // 获取到父的id
                            patentId = a._id
                            // 放进 选中的数组里
                            auths.push(patentId)
                        }
                    })
                }  
            })
            // 因为选中一次子就要加一次父id 所以要去一下重复
            auths = [...new Set(auths)]
            // 发添加请求
            let data = await roleEdit({
                id:this.id,
                name:this.form.name,
                auths:auths.join(',')
            })
            console.log(data);
            // console.log(auths.join(','));
            // console.log(data);
            let { error_code,msg } = data
            if(error_code === 200 ){
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.$router.push('/role/list')
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }
            
        },
        async GetRoleGetOne(id) {
            let data = await roleGetOne(id)
            let role = data.data.role
            this.form.name = role.name
            this.auths = role.auths
            // 获取一下所有父权限
            let allpatentId = this.authlist.map(parenta => parenta._id)
            // 在所有被选中的权限中找出父权限
            let checkPatentIds = this.auths.filter(item => allpatentId.includes(item))
            // console.log(this.auths);
            // console.log(checkPatentId);
            // 判断每个父权限中是否所有子权限都是选中
            // 找到每个父权限所拥有的所有子权限
            checkPatentIds.forEach(checkPatentid => {
                // 这是被选中的父id
                let parentObj = this.authlist.find(item => item._id === checkPatentid)
                // 找一下这个父id下的子id
                let sonid = parentObj.children.map(son => son._id)
                // 判断一下子权限是否都选中
                let bool = sonid.every(item => this.auths.includes(item))
                if(!bool){
                    // 没有全选中  在父数组中查一下 把对应的父权限删掉
                    let index = this.auths.indexOf(item => item === checkPatentIds)
                    this.auths.splice(index,1)
                }
            })
        }
    },
    created() {
        // 动态路由传参 - restful风格路径传参
        this.id = this.$route.params.id
        // console.log(this.id);
        this.GetAuthList()
        // 发请求 获取当前这个角色应该有的权限
        this.GetRoleGetOne(this.id)
    }
}
</script>

<style>
    
</style>
